<template>
  <div class="container">
    <el-breadcrumb separator="">
      <el-breadcrumb-item><div class="div1">采购管理</div></el-breadcrumb-item>
      <el-breadcrumb-item
        ><div class="div2">采购入库列表</div></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="tab" style="padding-bottom: 0">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待提交" name="0"> </el-tab-pane>
        <el-tab-pane label="待审核" name="1"> </el-tab-pane>
        <el-tab-pane label="已驳回" name="2"> </el-tab-pane>
        <el-tab-pane label="已完成" name="3"> </el-tab-pane>
      </el-tabs>
    </div>
    <el-collapse-transition>
      <div class="query" v-show="isShowForm">
        <div class="header">
          <span style="color: #333333">数据查询</span>
          <p
            @click="isShowForm = false"
            style="font-size: 14px; color: #409eff; cursor: pointer"
          >
            收起
          </p>
        </div>
        <el-form
          v-if="activeName == 0"
          ref="form"
          :model="form0"
          label-width="70px"
        >
          <el-form-item label="采购编号">
            <el-input
              size="small"
              v-model="form0.code"
              clearable
              placeholder="请输入采购编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="制单人">
            <el-select
              size="small"
              clearable
              v-model="form0.created"
              placeholder="请选择制单人"
              filterable
            >
              <el-option
                v-for="item in createdBy"
                :key="item.label"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购仓库">
            <el-select
              filterable
              size="small"
              clearable
              v-model="form0.war"
              placeholder="请选择采购仓库"
            >
              <el-option
                v-for="item in wareList.list"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购商品">
            <el-input
              v-model="form0.goodInfo"
              placeholder="请输入采购商品名称/品牌"
            ></el-input>
          </el-form-item>
          <el-form-item label="采购部门">
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="form0.department"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select
              size="small"
              clearable
              v-model="form0.supplier"
              placeholder="请选择供应商"
              filterable
            >
              <el-option
                v-for="(item, index) in supplierBy.list"
                :key="index"
                :label="item.supplierName"
                :value="item.supplierName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制单时间">
            <el-date-picker
              clearable
              v-model="form0.date"
              type="daterange"
              size="small"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              type="primary"
              @click="searchEvent()"
              v-on:keyup.enter="searchEvent()"
              >搜索</el-button
            >
            <el-button size="mini" @click="resetEvent()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form
          v-if="activeName == 1"
          ref="form"
          :model="form1"
          label-width="70px"
        >
          <el-form-item label="采购编号">
            <el-input
              size="small"
              v-model="form1.code"
              clearable
              placeholder="请输入采购编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="制单人">
            <el-select
              size="small"
              clearable
              v-model="form1.created"
              placeholder="请选择制单人"
              filterable
            >
              <el-option
                v-for="item in createdBy"
                :key="item.label"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购仓库">
            <el-select
              filterable
              size="small"
              clearable
              v-model="form1.war"
              placeholder="请选择采购仓库"
            >
              <el-option
                v-for="item in wareList.list"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购商品">
            <el-input
              v-model="form1.goodInfo"
              placeholder="请输入采购商品名称/品牌"
            ></el-input>
          </el-form-item>
          <el-form-item label="采购部门">
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="form1.department"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select
              size="small"
              clearable
              v-model="form1.supplier"
              placeholder="请选择供应商"
              filterable
            >
              <el-option
                v-for="(item, index) in supplierBy.list"
                :key="index"
                :label="item.supplierName"
                :value="item.supplierName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制单时间">
            <el-date-picker
              clearable
              v-model="form1.date"
              type="daterange"
              size="small"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              type="primary"
              @click="searchEvent()"
              v-on:keyup.enter="searchEvent()"
              >搜索</el-button
            >
            <el-button size="mini" @click="resetEvent()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form
          v-if="activeName == 2"
          ref="form"
          :model="form2"
          label-width="70px"
        >
          <el-form-item label="采购编号">
            <el-input
              size="small"
              v-model="form2.code"
              clearable
              placeholder="请输入采购编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="制单人">
            <el-select
              size="small"
              clearable
              v-model="form2.created"
              placeholder="请选择制单人"
              filterable
            >
              <el-option
                v-for="item in createdBy"
                :key="item.label"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购仓库">
            <el-select
              filterable
              size="small"
              clearable
              v-model="form2.war"
              placeholder="请选择采购仓库"
            >
              <el-option
                v-for="item in wareList.list"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购商品">
            <el-input
              v-model="form2.goodInfo"
              placeholder="请输入采购商品名称/品牌"
            ></el-input>
          </el-form-item>
          <el-form-item label="采购部门">
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="form2.department"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select
              size="small"
              clearable
              v-model="form2.supplier"
              placeholder="请选择供应商"
              filterable
            >
              <el-option
                v-for="(item, index) in supplierBy.list"
                :key="index"
                :label="item.supplierName"
                :value="item.supplierName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制单时间">
            <el-date-picker
              clearable
              v-model="form2.date"
              type="daterange"
              size="small"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              type="primary"
              @click="searchEvent()"
              v-on:keyup.enter="searchEvent()"
              >搜索</el-button
            >
            <el-button size="mini" @click="resetEvent()">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form
          v-if="activeName == 3"
          ref="form"
          :model="form3"
          label-width="70px"
        >
          <el-form-item label="采购编号">
            <el-input
              size="small"
              v-model="form3.code"
              clearable
              placeholder="请输入采购编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="制单人">
            <el-select
              size="small"
              clearable
              v-model="form3.created"
              placeholder="请选择制单人"
              filterable
            >
              <el-option
                v-for="item in createdBy"
                :key="item.label"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购仓库">
            <el-select
              filterable
              size="small"
              clearable
              v-model="form3.war"
              placeholder="请选择采购仓库"
            >
              <el-option
                v-for="item in wareList.list"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购商品">
            <el-input
              v-model="form3.goodInfo"
              placeholder="请输入采购商品名称/品牌"
            ></el-input>
          </el-form-item>
          <el-form-item label="采购部门">
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="form3.department"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select
              size="small"
              clearable
              v-model="form3.supplier"
              placeholder="请选择供应商"
              filterable
            >
              <el-option
                v-for="(item, index) in supplierBy.list"
                :key="index"
                :label="item.supplierName"
                :value="item.supplierName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制单时间">
            <el-date-picker
              clearable
              v-model="form3.date"
              type="daterange"
              size="small"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              type="primary"
              @click="searchEvent()"
              v-on:keyup.enter="searchEvent()"
              >搜索</el-button
            >
            <el-button size="mini" @click="resetEvent()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
    <div class="btns">
      <el-button
        style="opacity: 0"
        v-show="!isShowForm"
        type="primary"
        size="mini"
        ><span style="display: flex; align-items: center">
          <img
            style="width: 14px; height: 14px; margin-right: 5px"
            src="../../assets/icon/icon_daochu.png"
          />导出
        </span></el-button
      >
      <el-button
        @click="exports"
        v-if="parArray.indexOf('exportRk') != -1 && activeName == 3"
        type="primary"
        size="mini"
        ><span style="display: flex; align-items: center">
          <img
            style="width: 14px; height: 14px; margin-right: 5px"
            src="../../assets/icon/icon_daochu.png"
          />导出
        </span></el-button
      >
      <el-button
        @click="tpPrintJS"
        v-if="parArray.indexOf('printingRk') != -1 && activeName == 3"
        size="mini"
        type="primary"
        ><span style="display: flex; align-items: center">
          <img
            style="width: 14px; height: 14px; margin-right: 5px"
            src="../../assets/icon/dayin.png"
          />打印
        </span></el-button
      >
      <el-button
        type="primary"
        size="mini"
        @click="isShowForm = true"
        v-show="!isShowForm"
        style="position: absolute; right: 10px"
        >搜索展开</el-button
      >
    </div>
    <div class="tableContext">
      <el-table
        :data="tableData.list"
        @selection-change="multipleSelection = $event"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column label="制单时间" min-width="110px">
          <template slot-scope="scope">
            <span> {{ $moment(scope.row.createdTime) }} </span>
          </template>
        </el-table-column>
        <el-table-column label="采购编号">
          <template slot-scope="scope">
            <span style="cursor: pointer" @click="rowClick(scope.row, 1)">{{
              scope.row.purchaseOrderNo
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购入库编号" width="110px">
          <template slot-scope="scope">
            <span style="cursor: pointer" @click="rowClick(scope.row, 2)">{{
              scope.row.purchaseInOrderNo
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="驳回时间"
          min-width="100px"
          v-if="activeName == 2"
        >
          <template slot-scope="scope">
            <span>{{ $moment(scope.row.rejectionTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          label="驳回原因"
          prop=""
          v-if="activeName == 2"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.rejectionReason }}</span>
          </template>
        </el-table-column>

        <el-table-column label="制单人" prop="createdName"></el-table-column>
        <!-- <el-table-column label="进度" ></el-table-column> -->
        <el-table-column
          label="采购数量"
          prop="purchaseQuantity"
        ></el-table-column>
        <el-table-column
          label="入库数量"
          prop="inDepotQuantity"
        ></el-table-column>

        <el-table-column
          width="120px;"
          label="未入库数量"
          prop="notInDepotQuantity"
        ></el-table-column>
        <el-table-column label="备注" prop="comment"></el-table-column>

        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 待提交 -->
            <p class="operation" v-if="activeName == 0">
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('1') != -1 &&
                  parArray.indexOf('submitRk') != -1
                "
                @click="submitAudit(scope.row.purchaseInOrderNo)"
                >提交审核</span
              >
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('6') != -1 &&
                  parArray.indexOf('fixRk') != -1
                "
                @click="fixRk(scope.row, 1)"
                >修改</span
              >
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('2') != -1 &&
                  parArray.indexOf('closeRk') != -1
                "
                @click="closeEvent(scope.row, scope.$index)"
                >关闭</span
              >
            </p>
            <!-- 待审核 -->
            <p class="operation" v-if="activeName == 1">
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('3') != -1 &&
                  parArray.indexOf('approveRk') != -1
                "
                @click="
                  (textare = ''),
                    (approveObj = scope.row),
                    (approveObj.type = 1),
                    (isApprove = true)
                "
                >批准</span
              >
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('4') != -1 &&
                  parArray.indexOf('rejectRk') != -1
                "
                @click="
                  (textare = ''),
                    (approveObj = scope.row),
                    (approveObj.type = 2),
                    (isApprove = true)
                "
                >驳回</span
              >
            </p>
            <!-- 已驳回 -->
            <p class="operation" v-if="activeName == 2">
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('5') != -1 &&
                  parArray.indexOf('againRk') != -1
                "
                @click="reopen(scope.row)"
                >重开</span
              >
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('2') != -1 &&
                  parArray.indexOf('closeRk') != -1
                "
                @click="closeEvent(scope.row, scope.$index)"
                >关闭</span
              >
            </p>
            <!-- 已完成 -->
            <p class="operation" v-if="activeName == 3">
              <span
                v-if="parArray.indexOf('recordRk') != -1"
                @click="record(scope.row)"
                >记录</span
              >
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('7') != -1 &&
                  parArray.indexOf('backRk') != -1
                "
                @click="returned(scope.row)"
                >退货</span
              >
              <span
                v-if="
                  scope.row.operatingStatus.indexOf('8') != -1 &&
                  parArray.indexOf('exchangeRk') != -1
                "
                @click="exchange(scope.row)"
                >换货</span
              >
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <p style="height: 30px"></p>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum >= 10">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->

    <el-drawer
      :show-close="false"
      append-to-body
      size="70%"
      :visible.sync="drawer"
      direction="rtl"
      :withHeader="false"
    >
      <div class="drawerContext">
        <div class="title">
          <i
            class="el-icon-close"
            @click="drawer = false"
            style="margin-left: 10px; cursor: pointer"
          ></i
          ><span style="margin-left: 20px">采购单详情</span>
        </div>
        <div class="context">
          创建时间：{{ $moment(detailObj.createdTime) }}
          <el-table :data="detailObj.itemVOs">
            <el-table-column
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商"
            ></el-table-column>
            <el-table-column
              prop="createdName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="purchaseOrgName"
              label="采购部门"
            ></el-table-column>
            <el-table-column label="采购仓库">
              <template slot-scope="scope">
                {{ mapWarName(scope.row.depotVos) }}
              </template>
            </el-table-column>
            <el-table-column label="商品类型">
              <template slot-scope="scope">
                {{ ["商品", "赠品"][scope.row.purchaseProdType - 1] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="purchaseProdName"
              label="采购商品"
            ></el-table-column>
            <el-table-column label="商品图片">
              <template slot-scope="scope" min-width="60">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="查看更多"
                  placement="top"
                >
                  <el-image
                    :src="ImgHttps + scope.row.purchaseProdImage.split(',')[0]"
                    @click="
                      (imageSrc = scope.row.purchaseProdImage),
                        (dialogVisible = true)
                    "
                    style="width: 60px; height: 60px; cursor: pointer"
                  ></el-image>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="purchaseProdBrandName"
              label="采购品牌"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdQuantity"
              label="采购数量"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdSpecificationName"
              label="采购规格"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdPrice"
              label="采购单价"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdAmount"
              label="采购金额"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :show-close="false"
      append-to-body
      size="70%"
      :visible.sync="inDrawer"
      direction="rtl"
      :withHeader="false"
    >
      <div class="drawerContext">
        <div class="title">
          <i
            class="el-icon-close"
            @click="inDrawer = false"
            style="margin-left: 10px; cursor: pointer"
          ></i
          ><span style="margin-left: 20px">采购入库单详情</span>
        </div>
        <div class="context">
          创建时间：{{ $moment(detailObj.createdTime) }}
          <el-table :data="detailObj">
            <el-table-column
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商"
            ></el-table-column>
            <el-table-column
              prop="createdName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="inDepotOrgName"
              label="入库部门"
            ></el-table-column>
            <el-table-column label="入库仓库">
              <template slot-scope="scope">
                {{ mapWarName(scope.row.orderPurchaseInOrderProdDepotList) }}
              </template>
            </el-table-column>
            <el-table-column label="商品类型">
              <template slot-scope="scope">
                {{ ["商品", "赠品"][Number(scope.row.inDepotProdType) - 1] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="inDepotProdName"
              label="入库商品"
            ></el-table-column>
            <el-table-column label="商品图片">
              <template slot-scope="scope" min-width="60">
                <!-- <el-tooltip
                  class="item"
                  effect="dark"
                  content="查看更多"
                  placement="top"
                > -->
                <el-image
                  :src="ImgHttps + scope.row.inDepotProdImage.split(',')[0]"
                  @click="
                    (imageSrc = scope.row.inDepotProdImage),
                      (dialogVisible = true)
                  "
                  style="width: 60px; height: 60px; cursor: pointer"
                ></el-image>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="inDepotProdBrandName"
              label="入库品牌"
            ></el-table-column>
            <el-table-column
              prop="inDepotProdQuantity"
              label="入库数量"
            ></el-table-column>
            <el-table-column
              prop="inDepotProdSpecificationName"
              label="入库规格"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdPrice"
              label="入库单价"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdAmount"
              label="入库金额"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :show-close="false"
      append-to-body
      size="70%"
      :visible.sync="drawerRecord"
      direction="rtl"
      :withHeader="false"
    >
      <div class="drawerContext">
        <div class="title">
          <i
            class="el-icon-close"
            @click="drawerRecord = false"
            style="margin-left: 10px; cursor: pointer"
          ></i
          ><span style="margin-left: 20px">记录</span>
        </div>
        <el-table :data="recordData">
          <el-table-column label="采购编号">
            <template slot-scope="scope">
              <span
                @click="$refs.cgjl.rowClick(scope.row.purchaseOrderNo, 1)"
                style="color: #4168e7; cursor: pointer"
                >{{ scope.row.purchaseOrderNo }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="采购入库编号">
            <template slot-scope="scope">
              <span
                @click="
                  $refs.cgjl.rowClick(scope.row.orderPurchaseInOrderNo, 2)
                "
                style="color: #4168e7; cursor: pointer"
                >{{ scope.row.orderPurchaseInOrderNo }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="采购退货编号">
            <template slot-scope="scope">
              <span
                @click="$refs.cgjl.rowClick(scope.row.purchaseReturnOrderNo, 4)"
                style="color: #4168e7; cursor: pointer"
                >{{ scope.row.purchaseReturnOrderNo }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="采购换货编号">
            <template slot-scope="scope">
              <span
                @click="
                  $refs.cgjl.rowClick(scope.row.purchaseExchangeOrderNo, 3)
                "
                style="color: #4168e7; cursor: pointer"
                >{{ scope.row.purchaseExchangeOrderNo }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <el-dialog
      title="图片"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="50%"
    >
      <div v-if="imageSrc" style="display: flex; flex-wrap: wrap">
        <el-image
          v-for="item in imageSrc.split(',')"
          v-if="item.length"
          :src="ImgHttps + item"
          style="margin-right: 10px; width: 100px; height: 100px"
          :key="item"
        ></el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="审批"
      :visible.sync="isApprove"
      :append-to-body="true"
      width="50%"
    >
      <div v-if="approveObj.type == 1">确定批准采购入库单吗?</div>
      <div v-if="approveObj.type == 2">
        <div>确定驳回采购入库单吗?</div>
        <div style="margin-top: 10px; display: flex; align-items: center">
          <span style="width: 80px"> 驳回理由: </span>
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="textare"
          >
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="approve">确定</el-button>
        <el-button @click="isApprove = false">关闭</el-button>
      </span>
    </el-dialog>
    <cgjl ref="cgjl"></cgjl>
    <vue-easy-print ref="easyPrint">
      <div v-for="item in printData" style="margin-bottom: 20px" :key="item.id">
        <div
          style="
            border: 1px solid #333;
            border-bottom: 0;
            display: flex;
            justify-content: center;
          "
        >
          广东九航贸易有限公司
        </div>
        <div
          style="
            border: 1px solid #333;
            border-bottom: 0;
            display: flex;
            justify-content: center;
          "
        >
          采购入库单
        </div>
        <div
          style="
            padding: 0px 10px;
            border: 1px solid #333;
            border-bottom: 0;
            display: flex;
            justify-content: space-between;
          "
        >
          <span
            >单据编号:{{
              item.list.orderPurchaseInOrderBase.purchaseInOrderNo
            }}</span
          >
          <span
            >创建日期:{{
              $moment(item.list.orderPurchaseInOrderBase.createdTime)
            }}</span
          >
        </div>
        <table
          border="1"
          style="text-align: center"
          cellpadding="0"
          cellspacing="0"
        >
          <tr>
            <th width="5%">序号</th>
            <th width="5%">入库类型</th>
            <th width="7%">商品名称</th>
            <th width="7%">规格</th>
            <th width="5%">入库品牌</th>
            <th width="5%">入库部门</th>
            <th width="5%">入库仓库</th>
            <th width="5%">采购数量</th>
            <th width="5%">采购入库数量</th>
          </tr>
          <!-- 每页显示onePageRow条数据 -->
          <tr
            v-for="(row, index) in item.list.orderPurchaseInOrderItemList"
            :key="index"
          >
            <td>{{ index }}</td>
            <td>{{ row.inDepotProdType == 1 ? "商品" : "赠品" }}</td>
            <td>{{ row.inDepotProdName }}</td>
            <td>{{ row.inDepotProdSpecificationName }}</td>
            <td>{{ row.inDepotProdBrandName }}</td>
            <td>{{ row.inDepotOrgName }}</td>
            <td>{{ mapWarName(row.orderPurchaseInOrderProdDepotList) }}</td>
            <td>{{ row.purchasePordQuantity }}</td>
            <td>{{ row.inDepotProdQuantity }}</td>
          </tr>
        </table>
        <div
          style="
            padding: 0px 10px;
            border: 1px solid #333;
            border-top: 0;
            display: flex;
            justify-content: space-between;
          "
        >
          <span
            >制单人:{{ item.list.orderPurchaseInOrderBase.createdName }}</span
          >
          <span>收货人:</span>
          <span
            >审批人:{{
              item.list.orderPurchaseInOrderBase.logisticsManagerName
            }}</span
          >
        </div>
        <div style="page-break-after: always"></div>
      </div>
    </vue-easy-print>
    <div style="height: 100px"></div>
  </div>
</template>
<script>
import vueEasyPrint from "vue-easy-print";
import cgjl from "@/components/cgjl"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect, cgjl, vueEasyPrint },
  data () {
    return {
      printData: [],
      recordData: [],
      isApprove: false,
      drawerRecord: false,
      drawer: false,
      inDrawer: false,
      approveObj: {},
      dialogVisible: false,
      isShowForm: true,
      imageSrc: "",
      textare: "",
      multipleSelection: [], //展示的列表
      proposerList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      activeName: "0",
      form0: {
        code: "",
        created: "",
        war: "",
        goodInfo: "",
        department: null,
        supplier: "",
        date: "",
      },
      form1: {
        code: "",
        created: "",
        war: "",
        goodInfo: "",
        department: null,
        supplier: "",
        date: "",
      },
      form2: {
        code: "",
        created: "",
        war: "",
        goodInfo: "",
        department: null,
        supplier: "",
        date: "",
      },
      form3: {
        code: "",
        created: "",
        war: "",
        goodInfo: "",
        department: null,
        supplier: "",
        date: "",
      },
      detailObj: {},
      userId: sessionStorage.getItem("user_id"),
      tableData: "",
      pageNo: 1,
      pageSize: 10,
      detailTable: {
        list: [],
        pageNo: 1,
        pageSize: 10,
      },
      normalizer (node) {
        return {
          id: node.orgCode,
          label: node.orgName,
          children: node.children,
        };
      },
      options: [],
      createdBy: [],
      supplierBy: [],
      wareList: [],
      parArray: [],
    };
  },
  created () {
    // 权限设定判断
    let limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = limits.buttonTreeDto.filter(
      (item) => item.menuCode === "purchasingAddList"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    this.department();
    this.getList();
    this.createdPer();
    this.getWareList();
  },
  activated () {
    this.getList();
  },
  methods: {
    tpPrintJS () {
      this.printData = [];
      if (this.multipleSelection.length < 1) {
        this.$message.warning("请选择");
        this.value = "";
        return;
      }
      this.multipleSelection.forEach((res, index) => {
        this.axios.post("order/v1/purchase/in/order/item/list", {
          request: {
            purchaseInOrderNo: res.purchaseInOrderNo
          }
        }, {
          headers: {
            isLoading: false
          }
        }).then(ers => {
          this.printData.push({
            id: index,
            list: ers.data
          })
          if (index == this.multipleSelection.length - 1) {
            setTimeout(() => {
              this.$refs.easyPrint.print();
            }, 500)
            // console.log("打印");
          }
        })
      })
    },
    exports () {
      this.download(
        "/order/v1/purchase/in/order/purchaseOrderExportExcel", this.multipleSelection.map(res => res.id))
    },
    //重开
    reopen (e) {
      this.$router.push({
        name: "newStock",
        query: {
          purchaseOrderNo: e.purchaseOrderNo,
          purchaseInOrderNo: e.purchaseInOrderNo,
          type: "1"
        },
      });
    },
    record (e) {
      this.axios
        .post("order/v1/purchase/in/order/record", {
          request: {
            purchaseOrderNo: e.purchaseInOrderNo,
            purchaseType: "2",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.recordData = res.data;
            this.drawerRecord = true;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    exchange (e) {
      this.$router.push({
        name: "addExchangeOrder",
        query: {
          purchaseInOrderNo: e.purchaseInOrderNo,
        },
      });
    },
    // 退货操作
    returned (row) {
      this.$router.push({
        name: "returnRequest",
        query: {
          purchaseInOrderNo: row.purchaseInOrderNo,
        },
      });
    },
    // 修改入库
    fixRk (row) {
      this.$router.push({
        name: "rkFix",
        query: {
          purchaseInOrderNo: row.purchaseInOrderNo,
        },
      });
    },
    approve (e, type) {
      this.axios
        .post("order/v1/purchase/in/order/approve", {
          request: {
            approvalOperation:
              this.approveObj.type == 1 ? "approve" : "rejection", //审批操作 approve-批准 rejection-驳回
            procInstId: this.approveObj.procInstId, //工作流实例ID
            purchaseInOrderNo: this.approveObj.purchaseInOrderNo, //采购订单号
            rejectionReason: this.textare, //驳回原因
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.isApprove = false;
            this.$message.success("审批成功");
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    submitAudit (e) {
      this.axios
        .post("order/v1/purchase/in/order/submit", {
          request: {
            purchaseInOrderNo: e,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("提交成功");
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    mapWarName (e) {
      let str = "";
      e.forEach((res, index) => {
        if (index != e.length - 1) {
          str +=
            (res.purchaseDepotName ? res.purchaseDepotName : res.inDepotName) +
            ",";
        } else {
          str += res.purchaseDepotName
            ? res.purchaseDepotName
            : res.inDepotName;
        }
      });
      return str;
    },
    // 制单人 && 供应商
    createdPer () {
      this.axios
        .get("/order/v1/purchase/order/purchaseOrderCreatedByList", {
          isLoading: false,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.createdBy = res.data;
          } else {
            this.$message.error(res.message);
          }
        });

      // 供应商
      this.axios
        .post(
          "/order/v1/purchase/supplier/purchaseSupplierList",
          {
            createdBy: "",
            endTime: "",
            keyword: "",
            pageNo: 1,
            pageSize: 100000,
            prodBrandId: "",
            prodName: "",
            prodType: "",
            startTime: "",
            supplierAddress: "",
            supplierName: "",
            supplierStatus: 2,
          },
          {
            isLoading: false,
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.supplierBy = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getWareList () {
      this.axios
        .post("order/comm/commWarehouse/list", {
          pageSize: 999,
          pageNo: 1
        }, {
          isLoading: false,
        })
        .then((res) => {
          //仓库数据接口
          this.wareList = res.data;
          this.wareList.list = this.wareList.list.reverse();
        });
    },
    // 部门选择列表
    department () {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleClick (e) {
      this.getList();
    },
    rowClick (e, t) {
      if (t == 1) {
        this.axios
          .get(
            "order/v1/purchase/order/purchaseOrderDetails?purchaseOrderNo=" +
            e.purchaseOrderNo
          )
          .then((res) => {
            this.detailObj = res.data;
            this.drawer = true;
          });
      } else {
        this.axios
          .post("order/v1/purchase/in/order/item/list", {
            request: {
              purchaseInOrderNo: e.purchaseInOrderNo,
            },
          })
          .then((res) => {
            this.detailObj = res.data.orderPurchaseInOrderItemList;
            this.inDrawer = true;
          });
      }
    },
    searchEvent () {
      this.pageNo = 1;
      this.pageSize = 10;
      this.getList();
    },
    resetEvent () {
      if (this.activeName == 0) {
        this.form0 = {
          code: "",
          created: "",
          war: "",
          goodInfo: "",
          department: null,
          supplier: "",
          date: "",
        };
      } else if (this.activeName == 1) {
        this.form1 = {
          code: "",
          created: "",
          war: "",
          goodInfo: "",
          department: null,
          supplier: "",
          date: "",
        };
      } else if (this.activeName == 2) {
        this.form2 = {
          code: "",
          created: "",
          war: "",
          goodInfo: "",
          department: null,
          supplier: "",
          date: "",
        };
      } else if (this.activeName == 3) {
        this.form3 = {
          code: "",
          created: "",
          war: "",
          goodInfo: "",
          department: null,
          supplier: "",
          date: "",
        };
      }
      this.pageNo = 1;
      this.pageSize = 10;
      this.getList();
    },
    getList () {
      let tempForm = {};
      if (this.activeName == 0) {
        tempForm = this.form0;
      } else if (this.activeName == 1) {
        tempForm = this.form1;
      } else if (this.activeName == 2) {
        tempForm = this.form2;
      } else if (this.activeName == 3) {
        tempForm = this.form3;
      }

      let beginTime = "";
      let endTime = "";
      if (tempForm.date) {
        beginTime = tempForm.date[0] + " 00:00:00";
        endTime = tempForm.date[1] + " 23:59:59";
      }
      let department = [];
      this.getMenuBtnList(this.options, department, tempForm.department);

      this.axios
        .post("order/v1/purchase/in/order/list", {
          request: {
            createdEndTime: endTime, //创建结束时间
            createdName: tempForm.created, //创建人名字
            createdStartTime: beginTime, //创建开始时间
            depotName: tempForm.war, //仓库名称
            pageNo: this.pageNo, //开始页数
            pageSize: this.pageSize, //每页记录数
            purchaseInBrandName: "", //采购入库品牌名称
            purchaseInOrderNo: tempForm.code, //采购入库换货订单号
            purchaseOrderStatus: String(Number(this.activeName) + 1), //采购入库换货状态 1-待提交,2-审核中,3-已驳回,4-已完成
            purchaseInOrgName:
              department.length == 0 ? "" : department[0].lable, //采购入库部门名称
            purchaseInProdName: tempForm.goodInfo, //采购入库商品名字
            purchaseInSupplierName: tempForm.supplier, //采购入库供应商名字
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 递归
    getMenuBtnList (menuTreeList, menuList, code) {
      for (let item of menuTreeList) {
        if (item.orgCode == code) {
          menuList.push({
            lable: item.orgName,
            orgCode: item.orgCode,
            type: item.type,
          });
        } else if (item.children && item.children.length > 0) {
          this.getMenuBtnList(item.children, menuList, code);
        }
      }
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.getList();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.getList();
    },
    // 关闭采购单号
    closeEvent: _.debounce(function (row, index) {
      this.$confirm("确定关闭该采购单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/order/v1/purchase/in/order/delete", {
              request: {
                purchaseInOrderNo: row.purchaseInOrderNo,
              },
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.tableData.list.splice(index, 1);
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }, 300),
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

/deep/.el-form-item {
  margin-bottom: 0px;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-input__inner {
  // width: 250px;
  height: 28px;
  line-height: 28px;
}
/deep/.el-table td,
.el-table th.is-leaf {
  text-align: center;
}
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-form {
  display: flex;
  flex-wrap: wrap;
  /deep/.el-input__inner {
    width: 250px;
    clear: both;
  }
  /deep/ .el-form-item label:after {
    display: inline-block;
    width: 100%;
  }
  /deep/ .el-form-item__label {
    text-align: justify;
    height: 50px;
  }
}
/deep/.el-form-item {
  margin-right: 10px;
}
/deep/.el-drawer:focus {
  outline: none;
}
/deep/.el-drawer__body {
  overflow-y: auto;
}
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.container {
  .tab {
    margin-top: 20px;
    background: #fff;
    padding: 0px 10px;
    border-radius: 10px 10px 0px 0px;
  }
  .header {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 15px;
      color: #000;
    }

    p {
      color: #4168e7;
      font-size: 12px;
    }
  }
  .query {
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    border-radius: 0px 0px 10px 10px;
    /deep/ .el-form-item label:after {
      display: inline-block;
      width: 100%;
    }
    /deep/ .el-form-item__label {
      text-align: justify;
      height: 40px;
    }
    /deep/.el-input__inner {
      width: 250px;
    }
  }
  .btns {
    margin: 10px 0px;
  }
  .tableContext {
    margin-bottom: 40px;
  }
}
.drawerContext {
  .title {
    border-bottom: 1px solid #d9d9d9;
    padding: 10px;
  }
}
.operation {
  span {
    font-size: 15px;
    color: #333;
    display: inline-block;
    padding: 0 5px;
    color: #4168e7;
  }
  span:hover {
    cursor: pointer;
  }
}
/deep/.el-table th > .cell {
  color: #3a3a3a;
}
.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.selectTree {
  width: 250px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
/deep/.vue-treeselect {
  height: 28px;
}
/deep/.vue-treeselect--searchable .vue-treeselect__input-container {
  height: 28px;
  line-height: 28px;
  width: 100%;
}
/deep/.vue-treeselect__single-value {
  font-size: 14px;
  line-height: 28px;
}
/deep/.vue-treeselect__menu-container {
  font-size: 15px;
}
/deep/.vue-treeselect__multi-value-item {
  height: 20px;
  line-height: 20px;
  padding: 0;
}
/deep/.vue-treeselect__input {
  height: 26px;
  line-height: 26px;
  outline: none;
  border: none;
  padding: 0;
}
/deep/.vue-treeselect__placeholder {
  font-size: 10px;
  line-height: 28px;
}
/deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.vue-treeselect__control {
  height: 28px;
}
</style>